---
type: tutorial
title: Erstelle eine Social-Media-Fußzeile
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Erstelle eine neue Komponente von Grund auf und füge sie dann zu deinen Seiten hinzu
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - eine Fußzeilenkomponente zu erstellen
  - Props an eine Social-Media-Komponente zu erstellen und übergeben
</PreCheck>

Jetzt, wo du Astro-Komponenten auf einer Seite verwendet hast, ist es an der Zeit, eine Komponente innerhalb einer anderen Komponente zu verwenden!

## Erstelle eine Fußzeilenkomponente

<Steps>
1. Erstelle eine neue Datei unter `src/components/Footer.astro`.

2. Kopiere den folgenden Code in die neue `Footer.astro`-Datei.

    ```astro title="src/components/Footer.astro"
    ---
    const platform = "github";
    const username = "withastro";
    ---

    <footer>
      <p>Erfahre mehr über meine Projekte auf <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>
    ```
</Steps>

### Importiere und verwende `Footer.astro`

<Steps>
1. Füge die folgende Importanweisung zum Frontmatter in jeder deiner drei Astro-Seiten (`index.astro`, `about.astro` und `blog.astro`) hinzu:

    ```js
    import Footer from '../components/Footer.astro';
    ```

2. Füge eine neue `<Footer />`-Komponente in deiner Astro-Vorlage auf jeder Seite ein, kurz vor dem schließenden `</body>`-Tag, um deine Fußzeile am Ende der Seite anzuzeigen.

    ```astro ins={1}
        <Footer />
      </body>
    </html>
    ```

3. Überprüfe in der Browser-Vorschau, dass du den Text deiner neuen Fußzeile auf jeder Seite sehen kannst.
</Steps>

<Box icon="puzzle-piece">

## Probiere es selbst aus – Personalisiere deine Fußzeile

Passe deine Fußzeile so an, dass sie mehrere soziale Netzwerke (z. B. Instagram, X (Twitter), LinkedIn) anzeigt und füge deinen Benutzernamen hinzu, um direkt auf dein eigenes Profil zu verlinken.

</Box>

### Code Check-In

Wenn du jedem Schritt im Tutorial gefolgt bist, sollte deine `index.astro`-Datei wie folgt aussehen:

```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Startseite';
---

<html lang="de">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
      <Navigation />
		<h1>{pageTitle}</h1>
		<Footer />
	</body>
</html>
```

## Erstelle eine Social-Media-Komponente

Da du möglicherweise mehrere Online-Konten hast, auf die du verlinken kannst, kannst du eine einzige, wiederverwendbare Komponente erstellen und sie mehrmals anzeigen. Jedes Mal übergibst du ihr verschiedene Eigenschaften (`props`): die Online-Plattform und deinen dortigen Benutzernamen.

<Steps>
1. Erstelle eine neue Datei unter `src/components/Social.astro`.

2. Kopiere den folgenden Code in deine neue Datei `Social.astro`.

    ```astro title="src/components/Social.astro"
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    ```
</Steps>

### Importiere und verwende `Social.astro` in deiner Fußzeile

<Steps>
1. Ändere den Code in `src/components/Footer.astro`, um diese neue Komponente dreimal zu importieren und zu verwenden, wobei du jedes Mal unterschiedliche **Komponentenattribute** als Props übergibst:
    ```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---

    <footer>
      <p>Erfahre mehr über meine Projekte auf <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

2. Überprüfe deine Browser-Vorschau, und du solltest deine neue Fußzeile sehen, die Links zu diesen drei Plattformen auf jeder Seite anzeigt.
</Steps>

## Gestalte deine Social-Media-Komponente

<Steps>
1. Passe das Erscheinungsbild deiner Links an, indem du ein `<style>`-Tag zu `src/components/Social.astro` hinzufügst.

    ```astro title="src/components/Social.astro" ins={6-17} 'class="social-platform'
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>
    ```

2. Füge ein `<style>`-Tag zu `src/components/Footer.astro` hinzu, um das Layout seiner Inhalte zu verbessern.

    ```astro title="src/components/Footer.astro" ins={4-10}
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

3. Überprüfe erneut deine Browser-Vorschau und bestätige, dass jede Seite eine aktualisierte Fußzeile anzeigt.
</Steps>

<Box icon="question-mark">

### Teste dich selbst

1. Welche Codezeile musst du im Frontmatter einer Astro-Komponente schreiben, um die Werte von `title`, `author` und `date` als Props zu erhalten?
    <MultipleChoice>
      <Option isCorrect>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option>
        `<BlogPost title="Mein erster Beitrag" author="Dan" date="12. Aug. 2022" />`
      </Option>
    </MultipleChoice>

2. Wie **übergibst du Werte als Props** an eine Astro-Komponente?
    <MultipleChoice>
      <Option>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option isCorrect>
        `<BlogPost title="Mein erster Beitrag" author="Dan" date="12. Aug. 2022" />`
      </Option>
    </MultipleChoice>
</Box>


<Box icon="check-list">

## Checkliste

<Checklist>
- [ ] Ich kann neue `.astro`-Komponenten in `src/components/` erstellen.
- [ ] Ich kann Astro-Komponenten innerhalb anderer Astro-Komponenten importieren und verwenden.
- [ ] Ich kann Props an eine Astro-Komponente übergeben.
</Checklist>
</Box>

### Ressourcen

- [Komponenteneigenschaften in Astro](/de/basics/astro-components/#props-komponenteneigenschaften)
